<template>
    <scroller :style="mainStyle">
        <navigation-bar :title="'测评结果'" :onLeftButtonClick="function(){
        toBack()}" :rightIcon="' '"></navigation-bar>
        <div class="listbox">
            <div class="list-container">
                <div class="test-result">
                    <div class="result-head">
                        <div class="result-title">
                            <text class="title-text">测评报告</text>
                        </div>
                        <div class="list-item">
                            <text class="item-label">姓名:</text>
                            <text class="item-value">{{userData.name}}</text>
                        </div>
                        <div class="list-item">
                            <text class="item-label">手机号:</text>
                            <text class="item-value">{{userData.mobile}}</text>
                        </div>
                    </div>
                    <div class="desc">
                        <template v-if="type == 0">
                            <template v-for="(item , key) in source.dimension">
                                <text class="desc-title">{{key | H5replace}}</text>
                                <text class="desc-info">{{item | H5replace}}</text>
                            </template>
                        </template>
                        <template v-if="type == 1">
                            <text class="desc-title">测评结果</text>
                            <template v-for="(item) in source.desc">
                                <text class="desc-info">{{item | H5replace}}</text>
                            </template>
                        </template>
                        <template v-if="type == 2">
                            <template v-for="(items , ikey) in source.desc">
                                <template v-if="ikey == 'first'">
                                    <template v-for="(item , key) in items">
                                        <text class="desc-title">你的优势智能：{{key}}</text>
                                        <text class="desc-info">{{item.desc | H5replace}}</text>
                                    </template>
                                </template>
                                <template v-if="ikey == 'second'">
                                    <template v-for="(item , key) in items">
                                        <text class="desc-title">你的中性智能：{{key}}</text>
                                        <text class="desc-info">{{item.desc | H5replace}}</text>
                                    </template>
                                </template>
                                <template v-if="ikey == 'third'">
                                    <template v-for="(item , key) in items">
                                        <text class="desc-title">你的相对劣势智能：{{key}}</text>
                                        <text class="desc-info">{{item.desc | H5replace}}</text>
                                    </template>
                                </template>
                            </template>
                        </template>
                        <template v-if="type == 3">
                            <text class="desc-title">你的兴趣类型特点与偏好</text>
                            <div class="" v-for="item in source.desc">
                                <text class="desc-info">类型：{{item.name}}</text>
                                <text class="desc-info">特征：</text>
                                <template v-for="value in item.eitems">
                                    <text class="desc-info" v-if="value.key === 'tz'">{{value.desc | H5replace}}</text>
                                </template>
                                <text class="desc-info">偏好：</text>
                                <template v-for="value in item.eitems">
                                    <text class="desc-info" v-if="value.key === 'ph'">{{value.desc | H5replace}}</text>
                                </template>
                            </div>
                        </template>
                        <template v-if="type == 4">
                                <text class="desc-title">测评结果</text>
                            <template v-for="(item , ikey) in source.desc">
                                <template v-if="ikey == 'desc'">
                                    <text class="desc-info">{{item | H5replace}}</text>
                                </template>
                            </template>
                        </template>
                        <template v-if="type == 5">
                            <template v-for="(item , key) in source.items">
                                <text class="desc-title">{{key+1}}、{{item.dimensionName | H5replace}}</text>
                                <text class="desc-info">{{item.desc | H5replace}}</text>
                            </template>
                        </template>
                    </div>
                </div>
            </div>
        </div>

    </scroller>
</template>

<style scoped>
    .listbox {
        border-style: solid;
        border-width: 6px;
        border-color: #00BB9A;
        margin: 30px;
    }

    .list-container {
        margin: 15px;
        border-style: solid;
        border-width: 2px;
        border-color: #00BB9A;
        padding: 30px;
    }

    .test-result {
        border-style: dashed;
        border-width: 2px;
        border-color: #00BB9A;
    }

    .result-head {
        width: 600px;
        height: 400px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .result-title {
        margin-top: 50px;
        margin-bottom: 40px;
        height: 100px;
        border-style: solid;
        padding: 6px;
        border-width: 1px;
        border-color: #00BB9A;
    }

    .list-item {
        width: 538px;
        height: 47px;
        border-radius: 24px;
        border-style: solid;
        border-width: 1px;
        border-color: #00BB9A;
        margin-top: 20px;
        flex-direction: row;
    }

    .title-text {
        border-style: solid;
        border-width: 4px;
        border-color: #00BB9A;
        text-align: center;
        color: #434A54;
        font-size: 40px;
        width: 244px;
        height: 88px;
        line-height: 88px;
        font-weight: bold;
    }

    .item-label {
        font-size: 28px;
        font-weight: bold;
        color: #434A54;
        margin-left: 35px;
        margin-right: 35px;
        line-height: 47px;
        height: 47px;
    }

    .item-value {
        color: #999999;
        font-size: 28px;
        line-height: 47px;
        height: 47px;
    }

    .desc {
        width: 580px;
        /*height: 1234px;*/
        flex-direction: column;
        justify-content: center;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 30px;
    }

    .desc-title {
        color: #00BB9A;
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
        font-size: 30px;
    }

    .desc-info {
        color: #999999;
        font-size: 20px;
    }
</style>

<script>
  import NavigationBar from './widget/NavigationBar.vue'
  import Test from '../core/net/test'
  import user from '../core/net/user'
  import { getEntryPageStyle } from '../config/Config'
  import { Utils } from 'weex-ui'

  export default {
    components: {
      NavigationBar,
    },
    data: () => {
      return {
        test: 0,
        type: 0,
        date: '',
        source: {},
        mainStyle: {},
        fixedUrl: '',
        userData: {
          id: '',
        },
        webStyle: {height: '1500px', width: '580px'},
      }
    },
    methods: {
      loadUserInfo () {
        user.getUserInfoDao().then((res) => {
          if (res && res.result) {
            this.userData = res.data
            // this.fixedUrl = Address.getEvaluationResult(this.userData.id, this.test)
            this.init()
          }
        })
      },
      onPageFinish: function (e) {
        console.log(e)
      },
      init () {
        Test.getEvaluationResult(this.userData.id, this.test).then((res) => {
          if (res.result) {
            this.source = res.data
          }
        })
      },
    },
    created () {
      this.date = new Date().getTime()
      this.test = this.getQuery().test
      this.type = this.getQuery().type
      this.mainStyle = getEntryPageStyle(Utils)
      this.loadUserInfo()
    },
    computed: {},
  }
</script>
